<template>
  <div class="task_evaluation">
    <navigate @answerBack="answerBack">{{
      pageType == "task" ? "任务测评" : "问卷测评"
    }}</navigate>
    <div class="evaluation_list" @scroll="handleScroll">
      <div
        class="item_box white_box"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="item_tit">{{ item.name }}</div>
        <div class="item_term">
          剩余期限：{{
            item.is_time == 1
              ? getDay(item.end_time, item.start_time) + "天"
              : "无限"
          }}
        </div>
        <div class="progress_bar">
          <div
            class="file_bar"
            :style="{ width: item.user_complete_rate + '%' }"
          ></div>
          <div
            class="sliding_block"
            :style="{
              left: item.user_complete_rate + '%',
              width:
                convertToInteger(item.user_complete_rate) === 0 ? '0px' : '8px',
              height:
                convertToInteger(item.user_complete_rate) === 0 ? '0px' : '8px',
            }"
          ></div>
        </div>
        <div class="margin_top13">
          已有{{ item.user_complete_rate }}%的用户完成了任务
        </div>
        <div v-if="item.is_time == 1">
          <div class="margin_top13">任务起止时间：</div>
          <div class="dis_flex margin_top9">
            <div class="item_time">
              {{ convertTimestampToDateTime(item.start_time) }}
            </div>
            <div class="margin_right_left7">--</div>
            <div class="item_time">
              {{ convertTimestampToDateTime(item.end_time) }}
            </div>
          </div>
        </div>
        <div class="dividing_line"></div>
        <div class="dis_flex just_space_between">
          <div>发布人：{{ item.user_name }}</div>
          <div>包含问卷：{{ item.rating_scale_count || item.paper_num }}个</div>
          <!-- <div>收费：￥{{ item.price || 0 }}元/次</div> -->
        </div>
        <div class="evaluation_btn" @click="startEvaluation(item)">
          开始测评
        </div>
      </div>
      <div class="no_txt_data">-- 无更多任务测评了 --</div>
    </div>
  </div>
</template>

<script>
import { getDay, convertTimestampToDateTime } from "@/utils/time";

import { queryTaskEvaluation } from "@/api/evaluation/index";

import { queryQuestionnaireList } from "@/api/evaluation/questionnaire";
export default {
  data() {
    return {
      progress: 75, // 进度条的宽度
      pageSize: 10, // 每页显示的数量
      page: 1, // 当前页码
      list: [],
      total: 0,
      pageType: "", //task 任务测评  questionnaire 问卷测评
    };
  },
  created() {
    this.pageType = this.$route.query.type;
    if (this.pageType == "task") {
      this.getTaskEvaluation();
    } else {
      this.getQuestionnaireList();
    }
  },
  methods: {
    getDay,
    convertTimestampToDateTime,
    convertToInteger(percentageStr) {
      const numberStr = percentageStr.replace("%", "");
      const floatNumber = parseFloat(numberStr);
      return Math.round(floatNumber);
    },
    handleScroll(e) {
      const container = e.target;
      const containerHeight = container.clientHeight;
      const contentHeight = container.scrollHeight;
      const scrollTop = container.scrollTop;
      if (scrollTop + containerHeight >= contentHeight) {
        if (this.total >= this.list.length) {
          this.page += 1;
          this.getTaskEvaluation();
        }
      }
    },
    //问卷列表
    async getQuestionnaireList() {
      let par = {
        page: this.page,
        pageSize: this.pageSize,
      };
      let res = await queryQuestionnaireList(par);
      this.list.push(...res.data.data);
      this.total = res.data.total;
    },

    async getTaskEvaluation() {
      let par = {
        page: this.page,
        pageSize: this.pageSize,
      };
      let res = await queryTaskEvaluation(par);
      if (res.code == 200) {
        this.list.push(...res.data.data);
        this.total = res.data.total;
      }
    },
    startEvaluation(item) {
      let deadline;
      if (item.is_time == 1) {
        deadline = item.end_time;
      } else {
        deadline = "";
      }

      if (this.pageType == "task") {
        this.$router.push({
          path: `/taskList?id=${item.id}`,
        });
      } else if (this.pageType == "questionnaire") {
        this.$router.push(
          `/questionnaireList?id=${item.id}&name=${item.name}&deadline=${deadline}`
        );
      }
    },
    answerBack() {
      this.$router.push("/nav/evaluate");
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-content: center;
}
.just_space_between {
  justify-content: space-between;
}
.white_box {
  border-radius: 6.67px;
  background-color: #ffffff;
}
.margin_top13 {
  margin-top: 13px;
}
.margin_top9 {
  margin-top: 9px;
}
.margin_right_left7 {
  margin: 0 7px;
  line-height: 18px;
}

.task_evaluation {
  background-color: #f4f6fa;
  font-size: 12px;
  line-height: 12px;
  color: #666666;
}
.evaluation_list {
  height: calc(100vh - 60px);
  overflow: hidden;
  overflow-y: scroll;
  padding: 10px 10px 0 10px;
}
.item_box {
  position: relative;
  padding: 20.33px 13.33px;
  margin-bottom: 10px;
}
.item_tit {
  font-size: 16px;
  line-height: 16px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item_term {
  color: #ff9500;
  font-size: 14px;
  line-height: 14px;
  margin-top: 19px;
}
.progress_bar {
  position: relative;
  width: 166.67px;
  height: 8.67px;
  background: #c2efff;
  border-radius: 4.33px;
  margin-top: 13.33px;
}

.file_bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #0eaeff 0%, #0eaeff 100%);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.sliding_block {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    #0eaeff;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0) inset;
  transition: left 0.1s linear;
}
.item_time {
  width: 133.33px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 0.33px solid #aaaaaa;
  border-radius: 4.67px;
}
.dividing_line {
  border-bottom: 0.33px solid #dddddd;
  margin: 6px 0 20px;
}
.evaluation_btn {
  position: absolute;
  right: 10px;
  top: 70px;
  width: 73.33px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 12.67px;
}
.no_txt_data {
  color: #777777;
  font-size: 14px;
  line-height: 14px;
  margin: 32px auto;
  text-align: center;
}
</style>
